<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <!-- 确保在移动设备上正确显示 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户登录</title>
  <!-- 引入Font Awesome图标库，用于QQ和微信图标 -->
  <link rel="stylesheet" href="../css/denglu.css">
</head>
<body>
  <!-- 返回按钮 -->
  <a href="../html/home-main.html" class="back-btn">
    <i class="fas fa-arrow-left"></i> 返回
  </a>

  <!-- 登录容器 -->
  <div class="login-container">
    <!-- 左侧图片区域 -->
    <div class="spongebob-image">
      <img src="../img/小窗图片.jpg" alt="海绵宝宝装饰图片">
    </div>

    <!-- 右侧登录表单区域 -->
    <div class="login-box">
      <h2>账号登录</h2>
      <form action="">
        <!-- 账号输入框 -->
        <div class="form-group">
          <label for="username">账号：</label>
          <input type="text" id="username" placeholder="请输入账号">
        </div>

        <!-- 密码输入框 -->
        <div class="form-group">
          <label for="password">密码：</label>
          <input type="password" id="password" placeholder="请输入密码">
        </div>

        <!-- 验证码 -->
        <div class="form-group verify-group">
          <div>
            <label for="verify-code">验证码：</label>
            <input type="text" id="verify-code" placeholder="请输入验证码">
          </div>
          <button type="button" class="get-verify-code">获取验证码</button>
        </div>

        <!-- 登录按钮 -->
        <button type="submit" class="login-btn">登录</button>

        <!-- 注册链接 -->
        <p class="register-link">还没有账号？<a href="#">立即注册</a></p>

        <!-- 第三方登录区域 -->
        <div class="third-party-login">
          <!-- 分隔线 -->
          <div class="divider">
            <span>其他登录方式</span>
          </div>

          <!-- 社交登录按钮 -->
          <div class="social-buttons">
            <a href="#" class="social-btn qq-login" title="QQ登录">
              <i class="fab fa-qq"></i>
            </a>
            <a href="#" class="social-btn wechat-login" title="微信登录">
              <i class="fab fa-weixin"></i>
            </a>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>
</html>
